<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <meta name="description" content="Static &amp; Dynamic Tables"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/xcConfirm.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"/>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300"/>
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css"/>
</head>
<style type="text/css">
    #dialog-confirm {
        border: solid 1px green;
    }
    element.style {
        display: block;
        z-index: 1002;
        outline: 0px;
        position: relative;
        height: auto;
        width: 550px;
        top: -810px;
        left: 831px;
    }
</style>
<body>

<div class="row-fluid">
    <div class="span12">
        <button class="btn btn-mini btn-success" id="btn-add">
            <i class="icon-save bigger-120">新增</i>
        </button>
        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>组名</th>
                <th>类路径</th>
                <th>方法名</th>
                <th>类型</th>
                <th>状态</th>
                <th>cron表达式</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>执行次数</th>
                <th>间隔时间(S)</th>
                <th>是否进行日志落地</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="config : ${configs}">
                <td th:text="${config.id}">id</td>
                <td th:text="${config.name}">name</td>
                <td th:text="${config.group}">group</td>
                <td th:text="${config.classPath}">classPath</td>
                <td th:text="${config.methodName}">methodName</td>
                <td th:if="${config.count}"><span class="label label-lg label-pink arrowed-right">指定时间</span></td>
                <td th:unless="${config.count}"><span class="label label-lg label-yellow arrowed">cron表达式</span></td>
                <td th:if="${config.status == '启用'}"><span class="label label-success">启用</span></td>
                <td th:if="${config.status == '禁用'}"><span class="label label-danger">禁用</span></td>
                <td th:id="${config.id}" th:text="${config.cron}">cron</td>
                <td th:text="${config.startTime}">startTime</td>
                <td th:text="${config.endTime}">endTime</td>
                <td th:text="${config.count}">count</td>
                <td th:text="${config.intervalSecond}">intervalSecond</td>
                <td th:text="${config.isLogger}">isLogger</td>
                <td>
                    <div class="hidden-phone visible-desktop btn-group">
                        <button class="btn btn-mini btn-success"
                                th:if="${config.status == '禁用'}"
                                th:onclick="'javascript:changeJobStatus(\''+${config.id}+'\',\'0\');'">
                            <i class="icon-ok bigger-120">启用</i>
                        </button>

                        <button class="btn btn-mini btn-info"
                                th:if="${config.status == '禁用'}"
                                th:onclick="'javascript:updateCron(\''+${config.id}+'\');'">
                            <i class="icon-edit bigger-120"></i>
                        </button>

                        <button class="btn btn-mini btn-danger"
                                th:if="${config.status == '启用'}"
                                th:onclick="'javascript:changeJobStatus(\''+${config.id}+'\',\'1\');'">
                            <i class="icon-bolt bigger-120">禁用</i>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div><!--/span-->
    <div id="backgroup_color" style="background-color: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;display: none;">
        <div id="dialog-confirm" title="新增定时任务" style="display: none;width: 500px;background-color: #fff8d6;">
            <form id="form" action="/saveQuartz" method="post">
                <input type="hidden" name="id"/><br></br>
                <span style="display: inline-block;width: 80px">名称:</span>
                <input type="text" name="name" placeholder="功能名称" style="width:400px"/><br></br>
                <span style="display: inline-block;width: 80px">组名:</span>
                <input type="text" name="group" placeholder="功能组名称" style="width:400px"/><br></br>
                <span style="display: inline-block;width: 80px">类路径:</span>
                <input type="text" name="classPath" placeholder="类名称" style="width:400px"/><br></br>
                <span style="display: inline-block;width: 80px">方法名:</span>
                <input type="text" name="methodName" placeholder="方法名称" style="width:400px"/><br></br>
                <span style="display: inline-block;width: 80px">是否启用：</span>
                <input type="checkbox" name="status" checked="true" value="0"
                       style="text-align:left;opacity:1;"/><br></br>
                <span style="display: inline-block;width: 80px">是否打印日志：</span>
                <input type="checkbox" name="isLogger" checked="true" value="1"
                       style="text-align:left;opacity:1;"/><br></br>
                <span style="display: inline-block;width: 80px">类型:</span>
                <select class="chosen-select form-control" id="type" onchange="changeType()">
                    <option value="1" >cron表达式</option>
                    <option value="2">指定时间</option>
                </select><br></br>
                <div id="cronDiv">
                    <span style="display: inline-block;width: 80px">cron表达式:</span>
                    <input type="text" name="cron" placeholder="cron表达式" style="width:400px"/><br></br>
                </div>
                <div id="startTime_div">
                    <span style="display: inline-block;width: 80px">开始时间:</span>
                    <input type="datetime-local" name="startTimeStr" step="01" placeholder="开始时间" style="width:400px"/><br></br>
                    <span style="display: inline-block;width: 80px">结束时间:</span>
                    <input type="datetime-local" name="endTimeStr" step="01" placeholder="结束时间" style="width:400px"/><br></br>
                    <span style="display: inline-block;width: 80px">间隔时间段:</span>
                    <input type="number" name="intervalSecond" placeholder="间隔时间段(S)" style="width:400px"/><br></br>
                    <span style="display: inline-block;width: 80px">执行次数:</span>
                    <input type="number" name="count" placeholder="执行次数" style="width:400px"/><br></br>
                </div>
                    <span style="display: inline-block;width: 80px">参数:</span>
                    <textarea rows="5" cols="5" name="reqParms" placeholder="json格式参数" style="width:400px"/><br></br>
            </form>
        </div>
    </div>

</div><!--/row-->
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery-1.4.2.js"></script>
<script src="/xcConfirm.js"></script>
<script src="/jquery.ui.core.js"></script>
<script src="/jquery.ui.widget.js"></script>
<script src="/jquery.ui.mouse.js"></script>
<script src="/jquery.ui.button.js"></script>
<script src="/jquery.ui.draggable.js"></script>
<script src="/jquery.ui.position.js"></script>
<script src="/jquery.ui.dialog.js"></script>
<script>
    function changeJobStatus(id, status) {
        $.ajax({
            type: "POST",
            async: false,
            dataType: "JSON",
            cache: false,
            url: "/updateStatus",
            data: {
                id: id,
                status: status
            },
            success: function (data) {
                var json = JSON.parse(data);
                if (json.result) {
                    location.reload();
                } else {
                    alert(json.msg);
                }

            }
        });
    }

    function changeType() {
        var val = $("#type").val();
        $("#cronDiv").hide();
        $("#startTime_div").hide();
        if (val === '1') {
            $("#cronDiv").show();
        } else {
            $("#startTime_div").show();
        }

    }

    function updateCron(id) {
        $.ajax({
            type: "GET",
            async: false,
            dataType: "JSON",
            cache: false,
            url: "/findConfig",
            data: {
                id: id
            },
            success: function (data) {
                clearForm();
                var json = JSON.parse(data);
                $("input[name='id']").val(json.id);
                $("input[name='name']").val(json.name);
                $("input[name='classPath']").val(json.classPath);
                $("input[name='group']").val(json.group);
                $("input[name='methodName']").val(json.methodName);
                if (!json.isLogger){
                    $("input[name='isLogger']").attr("checked", false);
                }else{
                    $("input[name='isLogger']").attr("checked", true);
                }
                if (json.status === '0'){
                    $("input[name='status']").attr("checked", true);
                }else{
                    $("input[name='status']").attr("checked", false);
                }
                if (json.count != null){
                    $("#type").val(2);
                    $("input[name='startTimeStr']").val(json.startTimeStr);
                    $("input[name='endTimeStr']").val(json.endTimeStr);
                    $("input[name='intervalSecond']").val(json.intervalSecond);
                    $("input[name='count']").val(json.count);
                } else{
                    $("#type").val(1);
                    $("input[name='cron']").val(json.cron);
                }
                $("textarea[name='reqParms']").val(json.reqParms);
                $("textarea[name='startTime']").val(json.reqParms);
                $("#dialog-confirm").dialog("open");
                $("#backgroup_color").show();
                changeType();
            }
        });
    }

    function clearForm(){
        $("input[name='id']").val(null);
        $("input[name='name']").val(null);
        $("input[name='classPath']").val(null);
        $("input[name='group']").val(null);
        $("input[name='methodName']").val(null);
        $("input[name='isLogger']").attr("checked", true);
        $("input[name='status']").attr("checked", true);
        $("#type").val(1);
        $("input[name='startTimeStr']").val(null);
        $("input[name='endTimeStr']").val(null);
        $("input[name='intervalSecond']").val(null);
        $("input[name='count']").val(null);
        $("input[name='cron']").val(null);
        $("textarea[name='reqParms']").val(null);
        $("textarea[name='startTime']").val(null);
    }

    $(function () {
        $("#dialog-confirm").dialog({
            modal: true,
            autoOpen: false,
            width: 550,
            buttons: {
                "提交": function () {
                    if ( $("#type").val() == '1'){
                        $("input[name='startTimeStr']").val(null);
                        $("input[name='endTimeStr']").val(null);
                        $("input[name='intervalSecond']").val(null);
                        $("input[name='count']").val(null);
                    }else{
                        $("input[name='cron']").val(null);
                    }
                    if($('#isLogger').is(':checked')) {
                        $('#isLogger').val(true);
                     }else{
                        $('#isLogger').val(false);
                    }
                    $("form").submit();
                    $(this).dialog('close');
                    $("#backgroup_color").hide();
                },
                "取消": function () {
                    $(this).dialog('close');
                    $("#backgroup_color").hide();
                    return false;
                }
            }

        });

        $("#btn-add").click(function (event) {
            $("#dialog-confirm").dialog("open");
            $("#backgroup_color").show();
            $("#type").val(1);
            clearForm();
            changeType();
        });

    });
</script>
</body>
</html>